@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link href="/build/css/ztree/metro/ztree.css" rel="stylesheet" />
    <!-- <link rel="stylesheet" href="./build/css/app.css" media="all"> -->
    <style>
        .kit-sided .layui-side-scroll .layui-nav-item a, .layui-layout-admin .layui-header .layui-layout-right{padding: 0}
.kit-table, .kit-table-header{position: relative;box-shadow: 0 1px 7px 0 #ccc}
::-webkit-scrollbar{width: 10px;height: 10px}
::-webkit-scrollbar-button:vertical{display: none}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track{background-color: #e2e2e2}
::-webkit-scrollbar-thumb{border-radius: 0;background-color: rgba(0, 0, 0, .3)}
::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0, 0, 0, .35)}
::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0, 0, 0, .38)}
.kit-nav .layui-this, .layui-layout-left .layui-nav-item:hover{background-color: #393D49!important}
.kit-layout-admin .kit-logo-mobile{display: none}
.kit-nav .layui-nav-item{line-height: 50px}
.kit-nav .layui-nav-item .layui-nav-more{top: 22px}
.kit-nav .layui-nav-item .layui-nav-mored{top: 16px}
.kit-nav .layui-nav-item .layui-nav-child{top: 55px}
.kit-nav *{font-size: 13px}
.kit-nav .layui-nav-bar{height: 0}
.kit-nav .layui-this:after{content: none}
.kit-layout-admin .layui-footer{height: 35px;line-height: 35px}
.kit-layout-admin .layui-body{bottom: 35px;top: 50px}
.kit-layout-admin .layui-header{height: 50px}
.kit-layout-admin .layui-logo{line-height: 50px}
.kit-layout-admin .kit-side{top: 50px}
.kit-layout-admin .kit-sided{width: 50px}
.kit-side .layui-side-scroll, .kit-side .layui-side-scroll .layui-nav-tree{width: auto}
.kit-side .layui-side-scroll .kit-side-fold{height: 35px;background-color: #4A5064;color: #aeb9c2;line-height: 35px;text-align: center;cursor: pointer}
.kit-sided .layui-side-scroll .layui-nav-item{text-align: center}
.kit-sided .layui-side-scroll a span{display: none}
.kit-layout-admin .kit-body-folded, .kit-layout-admin .kit-footer-folded{left: 50px}
.kit-table-header{height: 50px}
.kit-table-header .kit-search-btns{padding: 10px;position: absolute}
.kit-table-header .kit-search-inputs{position: absolute;right: 0px;top: 0;padding: 10px 0px 10px 10px}
.kit-table-header .kit-search-inputs .kit-search-keyword{margin-right: 10px;position: relative}
.kit-table-header .kit-search-inputs .kit-search-more{cursor: pointer;color: #009688;position: absolute;top: 15px;right: -50px}
.kit-table-header .kit-search-inputs .kit-search-keyword input{height: 30px;line-height: 30px;width: 200px;padding-right: 32px}
.kit-table-header .kit-search-inputs .kit-search-keyword button{position: absolute;right: 0;top: 0;width: 30px;height: 30px;border: 0;cursor: pointer;background-color: #009688;color: #fff}
.kit-table-header .kit-search-btns .layui-btn{padding: 0 15px;border-radius: 2px 2px 2px 2px;}
.kit-search-mored{/*width: 100%;height: auto;top: 51px;background-color: #fff;z-index: 5;box-shadow: 0 4px 7px -3px #ccc;position: absolute;margin-bottom: 10px;display: none;*/height: auto;top: 51px;background-color: #fff;z-index: 5;box-shadow: -4px 4px 7px -3px #ccc;position: absolute;margin-bottom: 10px;display: none;right: 0;width: 680px;}
.kit-search-mored .kit-search-body{padding: 10px 10px 45px}
.kit-search-mored .kit-search-footer{height: 50px;bottom: 0;left: 0;position: absolute;width: 100%;border-top: 1px solid #e2e2e2;text-align: right}
.kit-tab, .kit-table-body{position: relative}
.kit-search-mored .kit-search-footer .kit-btn{margin: 10px 5px;padding: 0 15px}
.kit-search-mored .kit-search-footer .kit-btn:last-child{margin-right: 15px}
.kit-tab, .kit-table-body .layui-table-view{margin: 0}
.kit-tab{border-bottom: 0;box-shadow: none}
.kit-tab .kit-tab-tool, .kit-tab .kit-tab-tool-body .kit-line{border-bottom: 1px solid #e2e2e2}
.kit-tab .kit-tab-tool{position: absolute;width: 60px;height: 40px;top: 0;right: 10px;border-left: 1px solid #e2e2e2;line-height: 40px;text-align: center;cursor: pointer;border-right: 1px solid #e2e2e2}
.kit-tab .kit-tab-tool:hover{background-color: #f3f3f3}
.kit-tab .kit-tab-tool-body{position: absolute;top: 40px;right: 10px;width: 150px;border: 1px solid #e2e2e2;display: none;background-color: #fff;z-index: 999}
.kit-tab .kit-tab-tool-body ul{text-align: center;padding: 8px 0}
.kit-tab .kit-tab-tool-body ul li.kit-item{line-height: 35px;cursor: pointer;color: #393D49}
.kit-tab .kit-tab-tool-body ul li.kit-item:hover{background-color: #f3f3f3}
.kit-tab .layui-tab-title{width: calc(100% - 71px);padding-right: 0;position: absolute;z-index: 2}
.kit-tab .layui-tab-content{padding: 0;position: relative;top: 41px;overflow-y: auto}
.kit-tab .layui-tab-content iframe{width: 100%;border: 0}
@@media screen and (max-width:950px){.kit-layout-admin .layui-body, .kit-layout-admin .layui-footer, .kit-layout-admin .layui-layout-left{left: 50px}
.kit-layout-admin .kit-side{width: 50px}
.kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item, .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd{text-align: center}
.kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item a, .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd a{padding: 0}
.kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item a span, .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd a span, .kit-layout-admin .layui-logo, .kit-side .layui-side-scroll .kit-side-fold{display: none}
.kit-layout-admin .kit-logo-mobile{display: block;width: 50px}}
.layui-colla-title
    {
       padding: 0 15px 0 15px;
    }
    .layui-colla-item{
      padding-left: 15px;
      margin-top: 5px;
    }
    dt{
          margin: 5px 0 5px 0;
    }
    .cdd{-webkit-margin-start: 20px;}
    </style>
</head>

<body>
    <div class="kit-table">
        <div class="layui-form" lay-filter="kit-search-form">
            <div class="kit-table-header">
                <div class="kit-search-btns layui-btn-group demoTable">
                    <!--<a href="javascript:;" data-action="add" data-type="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe61f;</i> 新增</a>
                     <a href="javascript:;" data-action="del-bulk" data-type="delBulk" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon">&#xe640;</i> 批量删除</a> -->
                    <!-- <button class="layui-btn layui-btn-sm" data-type="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" data-type="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" data-type="isAll">验证是否全选</button> -->
                </div>
                <div class="kit-search-inputs">
                    <div class="kit-search-keyword">
                        <input type="text" class="layui-input" name="TimeMin" id="Time" autocomplete="off"  class="layui-input" style="width: 210px;" placeholder="请选择创范围">
                        <button lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                    <!-- <div class="kit-search-more" id="kit-search-more">更多筛选<i class="layui-icon">&#xe61a;</i></div> -->
                </div>
            </div>
        </div>
    </div>

    <table  id="table_data" lay-filter="lf_table_data"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="/plugins/layui/layui.js"></script>
    <script>
        /**
        * 将日期格式化成指定格式的字符串
        * param date 要格式化的日期，不传时默认当前时间，也可以是一个时间戳
        * param fmt 目标字符串格式，支持的字符有：y,M,d,q,w,H,h,m,S，默认：yyyy-MM-dd HH:mm:ss
        * returns 返回格式化后的日期字符串
        */
        function dateFormat(date, fmt)
        {
            date = date == undefined ? new Date() : date;
            date = typeof date == 'number' ? new Date(date) : date;
            fmt = fmt || 'yyyy-MM-dd HH:mm:ss';
            var obj =
            {
                'y': date.getFullYear(), // 年份，注意必须用getFullYear
                'M': date.getMonth() + 1, // 月份，注意是从0-11
                'd': date.getDate(), // 日期
                'q': Math.floor((date.getMonth() + 3) / 3), // 季度
                'w': date.getDay(), // 星期，注意是0-6
                'H': date.getHours(), // 24小时制
                'h': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 12小时制
                'm': date.getMinutes(), // 分钟
                's': date.getSeconds(), // 秒
                'S': date.getMilliseconds() // 毫秒
            };
            var week = ['天', '一', '二', '三', '四', '五', '六'];
            for(var i in obj)
            {
                fmt = fmt.replace(new RegExp(i+'+', 'g'), function(m)
                {
                    var val = obj[i] + '';
                    if(i == 'w') return (m.length > 2 ? '星期' : '周') + week[val];
                    for(var j = 0, len = val.length; j < m.length - len; j++) val = '0' + val;
                    return m.length == 1 ? val : val.substring(val.length - m.length);
                });
            }
            return fmt;
        }
        
        //document.write(departmentRecursion(0, json));  
        layui.config({
                base: '/build/js/'
        }).use(['jquery','table','ztree','form','laydate'], function () {
            var table = layui.table;
            var laytpl = layui.laytpl;
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.$;
            var urlList='/Admin/Log/OperationLog';
            //lay-data="{url:'/table.json', page:true, id:'idTest',height: 'full-75'}"
            //方法级渲染
            table.render({
                elem: '#table_data'//指定原始表格元素选择器（推荐id选择器）
                , cols: [[ //标题栏
                    { checkbox:true, fixed: true }
                    , { field: 'Id', title: 'ID', width: 60, sort: true, fixed: true }
                    , { field: 'Uid', width: 80, title: '操作ID'}
                    , { field: 'Time', width: 150, title: '时间', templet:'<div>{{dateFormat(parseInt(d.Time+"000"),"yyyy-MM-dd HH:mm")}}</div>'}
                    , { field: 'Ip', width: 160, title: 'IP' }
                    , { field: 'Status', width: 60, title: '状态' }
                    , { field: 'Url', width: 160, title: '操作的URL' }
                    , { field: 'Info', width: 330, title: '信息' }
                    , { fixed: 'right', width:80, align:'center', toolbar: '#barDemo', title: '操作'}
                ]]
                , url: urlList
                , page: true
                , limit: 10
                , id: 'ldid_data'
                , height: 'full-75',
                response: {
                    statusName: 'Code',
                    statusCode: 200,
                    msgName: 'Message',
                    countName: 'Total',
                    dataName: 'Data'
                },
                request: {
                    pageName: 'Index', //页码的参数名称，默认：page
                    limitName: 'Size' //每页数据量的参数名，默认：limit
                }  
            });

            //日期范围选择
            laydate.render({ 
            elem: '#Time'
            ,range: '~' //或 range: '~' 来自定义分割字符
            });
            
            //监听工具条
            table.on('tool(lf_table_data)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.msg('ID：' + data.Id + ' 的删除操作');
                }
            });
            
            //监听搜索表单提交
            form.on('submit(search)', function (data) {
                console.log(data.field);
                layer.msg(JSON.stringify(data.field));
                //带条件查询(当前页面url)
                // tableIns.reload({
                //     where: data.field
                // });
                //载入数据(ajax加载查询)
                table.reload('ldid_data', {
                    url: urlList
                    ,where: data.field //设定异步数据接口的额外参数
                });
                return false;
            });
        });
    </script>
</body>
</html>